<template>
  <div class="worker-health-monitor">
    <div class="module-title">
      <i class="icon">🏥</i>
      <span style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">工人健康监控</span>
    </div>

    <!-- 面部识别区域 -->
    <div class="face-recognition-section">
      <div class="section-title" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">面部识别</div>
      <div class="face-display">
        <div class="face-frame">
          <div class="scanning-line"></div>
          <div class="corner top-left"></div>
          <div class="corner top-right"></div>
          <div class="corner bottom-left"></div>
          <div class="corner bottom-right"></div>
          <div class="face-icon">👤</div>
        </div>
        <div class="face-info" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ currentWorker.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">工号：</span>
            <span class="value">{{ currentWorker.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">岗位：</span>
            <span class="value">{{ currentWorker.position }}</span>
          </div>
          <div class="info-item">
            <span class="label">状态：</span>
            <span class="value" :class="currentWorker.statusClass">{{ currentWorker.status }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 生理数据监控 -->
    <div class="vital-signs-section">
      <div class="section-title" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">生理数据监控</div>
      <div class="vital-signs-grid">
        <!-- 心率 -->
        <div class="vital-card heartbeat">
          <div class="vital-header">
            <span class="vital-icon">❤️</span>
            <span class="vital-name" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">心率</span>
          </div>
          <div class="vital-value">
            <span class="value">{{ vitalSigns.heartRate }}</span>
            <span class="unit">bpm</span>
          </div>
          <div class="vital-chart" ref="heartRateChart"></div>
          <div class="vital-status" :class="vitalSigns.heartRateStatus">
            {{ getStatusText(vitalSigns.heartRateStatus) }}
          </div>
        </div>

        <!-- 呼吸 -->
        <div class="vital-card breathing">
          <div class="vital-header">
            <span class="vital-icon">🫁</span>
            <span class="vital-name" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">呼吸</span>
          </div>
          <div class="vital-value">
            <span class="value">{{ vitalSigns.breathing }}</span>
            <span class="unit">次/分</span>
          </div>
          <div class="vital-chart" ref="breathingChart"></div>
          <div class="vital-status" :class="vitalSigns.breathingStatus">
            {{ getStatusText(vitalSigns.breathingStatus) }}
          </div>
        </div>

        <!-- 体温 -->
        <div class="vital-card temperature">
          <div class="vital-header">
            <span class="vital-icon">🌡️</span>
            <span class="vital-name" style="font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;">体温</span>
          </div>
          <div class="vital-value">
            <span class="value">{{ vitalSigns.temperature }}</span>
            <span class="unit">℃</span>
          </div>
          <div class="vital-chart" ref="temperatureChart"></div>
          <div class="vital-status" :class="vitalSigns.temperatureStatus">
            {{ getStatusText(vitalSigns.temperatureStatus) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'WorkerHealthMonitor',
  data() {
    return {
      currentWorker: {
        name: '张建国',
        id: 'W20231001',
        position: '高空作业',
        status: '正常',
        statusClass: 'normal'
      },
      vitalSigns: {
        heartRate: 78,
        heartRateStatus: 'normal',
        breathing: 16,
        breathingStatus: 'normal',
        temperature: 36.5,
        temperatureStatus: 'normal'
      },
      heartRateData: [],
      breathingData: [],
      temperatureData: [],
      charts: {
        heartRate: null,
        breathing: null,
        temperature: null
      },
      workers: [
        { name: '张建国', id: 'W20231001', position: '高空作业', status: '正常', statusClass: 'normal' },
        { name: '李明华', id: 'W20231002', position: '隧道掘进', status: '正常', statusClass: 'normal' },
        { name: '王大力', id: 'W20231003', position: '设备维护', status: '疲劳', statusClass: 'warning' },
        { name: '赵小强', id: 'W20231004', position: '桥梁施工', status: '正常', statusClass: 'normal' }
      ],
      currentWorkerIndex: 0
    }
  },
  mounted() {
    this.initCharts()
    this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
    if (this.workerSwitchTimer) {
      clearInterval(this.workerSwitchTimer)
    }
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    initCharts() {
      // 初始化数据
      for (let i = 0; i < 20; i++) {
        this.heartRateData.push(75 + Math.random() * 10)
        this.breathingData.push(14 + Math.random() * 4)
        this.temperatureData.push(36.3 + Math.random() * 0.4)
      }

      this.initHeartRateChart()
      this.initBreathingChart()
      this.initTemperatureChart()
    },

    initHeartRateChart() {
      this.charts.heartRate = echarts.init(this.$refs.heartRateChart)
      const option = {
        grid: {
          left: 0,
          right: 0,
          top: 2,
          bottom: 2
        },
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false,
          min: 60,
          max: 100
        },
        series: [{
          data: this.heartRateData,
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#ff6b9d',
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 107, 157, 0.3)' },
              { offset: 1, color: 'rgba(255, 107, 157, 0.05)' }
            ])
          }
        }]
      }
      this.charts.heartRate.setOption(option)
    },

    initBreathingChart() {
      this.charts.breathing = echarts.init(this.$refs.breathingChart)
      const option = {
        grid: {
          left: 0,
          right: 0,
          top: 2,
          bottom: 2
        },
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false,
          min: 10,
          max: 25
        },
        series: [{
          data: this.breathingData,
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#4fc3f7',
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(79, 195, 247, 0.3)' },
              { offset: 1, color: 'rgba(79, 195, 247, 0.05)' }
            ])
          }
        }]
      }
      this.charts.breathing.setOption(option)
    },

    initTemperatureChart() {
      this.charts.temperature = echarts.init(this.$refs.temperatureChart)
      const option = {
        grid: {
          left: 0,
          right: 0,
          top: 2,
          bottom: 2
        },
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false,
          min: 35.5,
          max: 37.5
        },
        series: [{
          data: this.temperatureData,
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#ffa726',
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 167, 38, 0.3)' },
              { offset: 1, color: 'rgba(255, 167, 38, 0.05)' }
            ])
          }
        }]
      }
      this.charts.temperature.setOption(option)
    },

    startDataUpdate() {
      // 更新生理数据（每2秒）
      this.updateTimer = setInterval(() => {
        this.updateVitalSigns()
      }, 2000)

      // 切换工人（每10秒）
      this.workerSwitchTimer = setInterval(() => {
        this.switchWorker()
      }, 10000)
    },

    updateVitalSigns() {
      // 更新心率
      const newHeartRate = 75 + Math.random() * 10
      this.heartRateData.shift()
      this.heartRateData.push(newHeartRate)
      this.vitalSigns.heartRate = Math.round(newHeartRate)
      this.vitalSigns.heartRateStatus = this.getHeartRateStatus(this.vitalSigns.heartRate)

      // 更新呼吸
      const newBreathing = 14 + Math.random() * 4
      this.breathingData.shift()
      this.breathingData.push(newBreathing)
      this.vitalSigns.breathing = Math.round(newBreathing)
      this.vitalSigns.breathingStatus = this.getBreathingStatus(this.vitalSigns.breathing)

      // 更新体温
      const newTemperature = 36.3 + Math.random() * 0.4
      this.temperatureData.shift()
      this.temperatureData.push(newTemperature)
      this.vitalSigns.temperature = newTemperature.toFixed(1)
      this.vitalSigns.temperatureStatus = this.getTemperatureStatus(parseFloat(this.vitalSigns.temperature))

      // 更新图表
      this.updateCharts()
    },

    updateCharts() {
      if (this.charts.heartRate) {
        this.charts.heartRate.setOption({
          series: [{ data: this.heartRateData }]
        })
      }
      if (this.charts.breathing) {
        this.charts.breathing.setOption({
          series: [{ data: this.breathingData }]
        })
      }
      if (this.charts.temperature) {
        this.charts.temperature.setOption({
          series: [{ data: this.temperatureData }]
        })
      }
    },

    switchWorker() {
      this.currentWorkerIndex = (this.currentWorkerIndex + 1) % this.workers.length
      this.currentWorker = { ...this.workers[this.currentWorkerIndex] }
    },

    getHeartRateStatus(rate) {
      if (rate < 60 || rate > 100) return 'danger'
      if (rate < 70 || rate > 90) return 'warning'
      return 'normal'
    },

    getBreathingStatus(rate) {
      if (rate < 12 || rate > 20) return 'danger'
      if (rate < 14 || rate > 18) return 'warning'
      return 'normal'
    },

    getTemperatureStatus(temp) {
      if (temp < 36.0 || temp > 37.5) return 'danger'
      if (temp < 36.2 || temp > 37.2) return 'warning'
      return 'normal'
    },

    getStatusText(status) {
      const statusMap = {
        normal: '正常',
        warning: '注意',
        danger: '异常'
      }
      return statusMap[status] || '正常'
    }
  }
}
</script>

<style lang="scss" scoped>
.worker-health-monitor {
  height: 100%;
  padding: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 212, 170, 0.3);
    flex-shrink: 0;

    .icon {
      font-size: 18px;
      margin-right: 8px;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    }

    span {
      font-size: 18px;
      font-weight: bold;
      background: linear-gradient(90deg, #00d4aa, #00a8ff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  }

  // 面部识别区域
  .face-recognition-section {
    flex-shrink: 0;
    margin-bottom: 16px;

    .section-title {
      font-size: 14px;
      color: #00d4aa;
      margin-bottom: 10px;
      padding-left: 8px;
      border-left: 3px solid #00d4aa;
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .face-display {
      display: flex;
      gap: 12px;
      background: rgba(0, 0, 0, 0.3);
      padding: 14px 12px;
      border-radius: 6px;
      border: 1px solid rgba(0, 212, 170, 0.2);

      .face-frame {
        position: relative;
        width: 85px;
        height: 85px;
        background: rgba(0, 212, 170, 0.05);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .face-icon {
          font-size: 42px;
          opacity: 0.6;
          font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
        }

        // 扫描线动画
        .scanning-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, #00d4aa, transparent);
          animation: scan 2s ease-in-out infinite;
        }

        @keyframes scan {
          0%, 100% { top: 0; opacity: 0; }
          50% { top: calc(100% - 2px); opacity: 1; }
        }

        // 四角标记
        .corner {
          position: absolute;
          width: 12px;
          height: 12px;
          border: 2px solid #00d4aa;

          &.top-left {
            top: 4px;
            left: 4px;
            border-right: none;
            border-bottom: none;
          }

          &.top-right {
            top: 4px;
            right: 4px;
            border-left: none;
            border-bottom: none;
          }

          &.bottom-left {
            bottom: 4px;
            left: 4px;
            border-right: none;
            border-top: none;
          }

          &.bottom-right {
            bottom: 4px;
            right: 4px;
            border-left: none;
            border-top: none;
          }
        }
      }

      .face-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .info-item {
          display: flex;
          font-size: 13px;
          line-height: 1.5;
          margin-bottom: 2px;

          .label {
            color: #999;
            width: 42px;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
          }

          .value {
            color: #fff;
            flex: 1;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;

            &.normal {
              color: #00d4aa;
            }

            &.warning {
              color: #ffa726;
            }

            &.danger {
              color: #ff6b6b;
            }
          }
        }
      }
    }
  }

  // 生理数据监控
  .vital-signs-section {
    display: flex;
    flex-direction: column;

    .section-title {
      font-size: 14px;
      color: #00d4aa;
      margin-bottom: 8px;
      padding-left: 8px;
      border-left: 3px solid #00d4aa;
      flex-shrink: 0;
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .vital-signs-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .vital-card {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        padding: 6px 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        transition: all 0.3s;

        &:hover {
          border-color: rgba(0, 212, 170, 0.5);
          box-shadow: 0 0 15px rgba(0, 212, 170, 0.2);
        }

        .vital-header {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-bottom: 4px;

          .vital-icon {
            font-size: 13px;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
          }

          .vital-name {
            font-size: 13px;
            color: #ccc;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
          }
        }

        .vital-value {
          display: flex;
          align-items: baseline;
          gap: 3px;
          margin-bottom: 4px;

          .value {
            font-size: 22px;
            font-weight: bold;
            background: linear-gradient(90deg, #00d4aa, #00a8ff);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
          }

          .unit {
            font-size: 12px;
            color: #999;
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
          }
        }

        .vital-chart {
          height: 28px;
          margin-bottom: 4px;
        }

        .vital-status {
          text-align: center;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 3px;
          font-weight: 500;
          font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;

          &.normal {
            background: rgba(0, 212, 170, 0.2);
            color: #00d4aa;
          }

          &.warning {
            background: rgba(255, 167, 38, 0.2);
            color: #ffa726;
          }

          &.danger {
            background: rgba(255, 107, 107, 0.2);
            color: #ff6b6b;
          }
        }
      }
    }
  }
}
</style>
